// uno.config.js

import fs from 'node:fs'
// 预设rem转px
import presetRemToPx from '@unocss/preset-rem-to-px'
// transformerDirectives 可以使用@apply @screen theme函数
import transformerDirective from '@unocss/transformer-directives'
// loader helpers
// @ts-ignore 这个影响 unocss 插件提示
// import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'

import { defineConfig, presetAttributify, presetIcons, presetMini, transformerVariantGroup } from 'unocss'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

// 本地 SVG 图标存放目录 用于动态渲染图标 例如：菜单按钮
function generateSafeList(directories: string[]) {
  const safeList: string[] = []

  directories.forEach((dir) => {
    try {
      const dirPath = `./src/assets/svg/${dir}`
      const files = fs.readdirSync(dirPath)
      const icons = files
        .filter(file => file.endsWith('.svg'))
        .map(file => `i-${dir}-${file.replace('.svg', '')}`)
      safeList.push(...icons)
    }
    catch (error) {
      console.error(`无法读取图标目录 ${dir}:`, error)
    }
  })

  return safeList
}

export default defineConfig({
  presets: [
    presetAttributify({
      // 忽略的属性
      ignoreAttributes: ['container', 'table'],
    }),
    presetMini(),
    // 现在mt-1会转换为margin-top: 1px
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetIcons({
      collections: {
        test: FileSystemIconLoader(
          './src/assets/svg/test',
          svg => svg.replace(/#fff/, 'currentColor'),
          // svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
        ),
      },
    }),
  ],
  safelist: generateSafeList(['test']), // 传入数组参数
  transformers: [transformerVariantGroup(), transformerDirective()],
  //  自定义配置项
  rules: [
    /** 以下官网规则可自定义转换 */
    /* 例如 m-1 转换为 margin:0.25rem */
    // [/^m-(\d+)$/, ([, d]) => ({margin: `${d / 4}rem`})],
    // [/^p-(\d+)$/, match => ({padding: `${match[1] / 4}rem`})],
  ],
  // 自定义属性 一个属性可以对应多个unocss类值
  shortcuts: [
    // 动态快捷方式
    /**
     *   t+字号+透明度+加粗
     *   t14 就变成 text-14 color=rgba(37,51,71,1)
     *   t145 就变成 text-14 color=rgba(37,51,71,0.55)
     *   t14b5 就变成 text-14 color=rgba(37,51,71,1) font-weight: 500
     *   t145b5 就变成 text-14 color=rgba(37,51,71,0.55) font-weight: 500
     */
    [/^t(\d{2})(\d)?(b\d+)?$/, ([, size, opacity, weight]) => {
      const fontSize = `text-${size}`
      const fontWeight = weight ? `font-${weight.slice(1)}00` : ''
      const opacityValue = opacity ? (Number(opacity) * 0.1 + 0.05).toFixed(2) : '1'
      const color = `text-[rgba(37,51,71,${opacityValue})]`
      return `${fontSize} ${fontWeight} ${color}`
    }],
    {
      // 垂直水平居中
      'flex-center': 'flex items-center justify-center',
      // 放在最后
      'flex-end': 'flex items-center justify-end',
      // 垂直居中
      'flex-middle': 'flex items-center',
      // 分开两边
      'flex-between': 'flex items-center justify-between',
      // 垂直
      'flex-col-center': 'flex flex-col items-center',
      // 字体基线对其
      'flex-baseline': 'flex items-baseline',
      't16g': 'text-16 text-[rgba(127,137,175,1)]',
      't165': 'text-16 text-[rgba(127,137,175,0.5)]',
      // 忽略class样式
      'container': '',
      'table': '',
      'blue': 'color-[#007bff]',
    },
  ],
  theme: {
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
})
